.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.footer-container{
  background-color: #fff;
  position: fixed;
  z-index: 101;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  box-shadow: 0 -0.026667rem 0.053333rem rgba(0,0,0,.1);
  .guide-item {
    .f-flex();
    justify-content: center;
    flex: 1;
    text-align: center;
    flex-direction: column;
    font-size: 12px;
    .guide-text {
      margin-top: 3px;
    }
    .icon-1 {
      width: 24px;
      height: 24px;
      background: url("../../static/img/tabbar/a2.png") no-repeat;
      background-size: cover;
    }
    .icon-2 {
      width: 24px;
      height: 24px;
      background: url("../../static/img/tabbar/b2.png") no-repeat;
      background-size: cover;
    }
    .icon-3 {
      width: 24px;
      height: 24px;
      background: url("../../static/img/tabbar/c2.png") no-repeat;
      background-size: cover;
    }
    .icon-4 {
      width: 24px;
      height: 24px;
      background: url("../../static/img/tabbar/d2.png") no-repeat;
      background-size: cover;
    }
    &.active{
      .icon-1 {
        background: url("../../static/img/tabbar/a1.png") no-repeat;
        background-size: cover;
      }
      .icon-2 {
        background: url("../../static/img/tabbar/b1.png") no-repeat;
        background-size: cover;
      }
      .icon-3 {
        background: url("../../static/img/tabbar/c1.png") no-repeat;
        background-size: cover;
      }
      .icon-4 {
        background: url("../../static/img/tabbar/d1.png") no-repeat;
        background-size: cover;
      }
      .guide-text {
        color: rgb(24, 130, 212);
      }
    }
    .guide-text {
      color:rgb(197, 207, 213)
    }
  }
}